<template>
  <sys-layout>
    <template v-slot:top>
      <quarter-bar @init="onInit" @change="onChange"/>
    </template>

      <left-card v-for="(item, index) in list" :key="index" :title="item.title">
        <template v-slot:head-tool>
          <div class="card-common-tool">
            <div class="card-common-tool__ico"></div>
            <span @click="showDialog">比对</span>
          </div>
        </template>

        <div class="card-linewrap">
          <div class="card-line1">
            <div class="card-img-wrap">
              <img src="@/assets/screen/ico-money.svg" />
            </div>
            <div class="card-line1-right">
              <div class="card-line1-right__top">{{ item.label1 }}</div>
              <div class="card-line1-right__bottom">
                <div class="card-num"><sys-num :value="item.value1" /></div>
                <div class="card-unit">{{ item.unit1 }}</div>

                <div class="card-per">
                  <div class="card-per-txt" >同比</div>
                  <i class="card-per-arrow el-icon-top"></i>
                  <div class="card-per-num">1.3</div>
                  <div class="card-per-unit">%</div>
                </div>
              </div>
            </div>
          </div>
          <div class="card-line2">
            <div class="card-line2-half">
              <div class="card-line2-left">
                <img src="@/assets/screen/ico-money-mini.svg" />
              </div>
              <div class="card-line2-right">
                <div class="card-line2-right__top">{{ item.label2 }}</div>
                <div class="card-line2-right__bottom">
                  <div class="card-num"><sys-num :value="item.value2" /></div>
                  <div class="card-unit">{{ item.unit2 }}</div>
                </div>
              </div>
            </div>
            <div class="card-line2-half">
              <div class="card-line2-left">
                <img src="@/assets/screen/ico-build.svg" />
              </div>
              <div class="card-line2-right">
                <div class="card-line2-right__top">{{ item.label3 }}</div>
                <div class="card-line2-right__bottom">
                  <div class="card-num"><sys-num :value="item.value3" /></div>
                  <div class="card-unit">{{ item.unit3 }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </left-card>

    <screen-dialog v-bind.sync="dialog" @on-ok="onDialogOk"/>
  </sys-layout>
</template>

<script>
import quarterBar from '../quarter-bar'
import leftCard from '../left-card'
import screenDialog from '@/comp/screen/dialog/screen-dialog'
import dialogMixin from '@/components/common/dialog/dialog-mixin'

import jjyxLine from './jjyx-line'

export default {
  name: 'jjyx',
  cnName: '经济运行',
  mixins: [dialogMixin],
  components: {
    quarterBar,
    leftCard,
    screenDialog
  },
  data() {
    return {
      list: [
        {title: '建筑业产值', label1: '实际产值', value1: 13300, unit1: '千元', label2: '预估产值', value2: 13300, unit2: '千元', label3: '企业数量', value3: 165, unit3: '家'},
        {title: '交通运输业输入', label1: '实际营收', value1: 13300, unit1: '千元', label2: '预估营收', value2: 13300, unit2: '千元', label3: '企业数量', value3: 165, unit3: '家'},
        {title: '新增房地产销售面积', label1: '实际销售面积', value1: 13300, unit1: '千元', label2: '预估销售面积', value2: 13300, unit2: '千元', label3: '企业数量', value3: 165, unit3: '家'}
      ]
    }
  },
  methods: {
    onInit(p) {
      console.info('p', p)
    },
    onChange() {

    },
    showDialog() {
      this.setDialog({
        width: '60%',
        height: '50%',
        title: '房产销售分析',
        comp: jjyxLine,
        props: {}
      })
    }
  },
  mounted() {
  }
}
</script>

<style lang="scss" scoped>
.card-common-tool {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #58CDD1;

  & > span {
    margin-left: 5px;
  }

  &__ico {
    width: 17px;
    height: 16px;
    background-image: url("~@/assets/screen/ico-bar.svg");
    background-size: 100% 100%;
  }

  &:hover {
    color: #FF0;
    .card-common-tool__ico {
      background-image: url("~@/assets/screen/ico-bar-hover.svg");
      background-size: 100% 100%;
    }
  }
}

.card-linewrap {
  padding: 0 20px;

  .card-num {
    font-weight: 500;
    color: #88CDFF;
    font-size: 30px;
  }
  .card-unit {
    color: #88CDFF;
    font-size: 14px;
  }
  .card-line1 {
    display: flex;
    margin-top: 40px;

    .card-img-wrap {
      width: 70px;
      height: 77px;
      background-image: url("~@/assets/screen/ico-light.png");
      background-size: 100% 100%;
      position: relative;
      margin-right: 8px;

      & > img {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: -6px;
      }
    }

    &-right {
      flex: 1;

      &__top {
        text-shadow: 1px 1px 3px rgb(0 121 254);
        font-size: 24px;
        letter-spacing: 4px;
      }
      &__bottom {
        display: flex;
        align-items: baseline;
      }



      .card-per {
        color: #F59972;
        display: flex;
        align-items: baseline;
        margin-left: 20px;

        &-txt {
          font-size: 14px;
          color: rgba(234, 254, 255, 0.7);
        }
        &-arrow {

        }
        &-num {
          font-size: 28px;
        }
        &-unit {

        }
      }
    }
  }
  .card-line2 {
    display: flex;
    margin-top: 10px;

    &-half {
      display: flex;
      flex: 1;
    }
    &-left {
      position: relative;
      width: 32px;
      height: 20px;
      background-image: url("~@/assets/screen/ico-light-mini.png");
      background-size: 100% 100%;
      margin-top: 15px;

      & > img {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: -14px;
      }
    }
    &-right {
      &__top {
        text-shadow: 1px 1px 3px rgb(0 121 254);
        font-size: 20px;
        letter-spacing: 4px;
      }
      &__bottom {
        display: flex;
        align-items: baseline;
      }
    }
  }
}


</style>
